<script setup lang='ts'>
import { Ref, ref, watch } from 'vue'
// 导入路由
import { RouteLocationMatched, useRoute } from 'vue-router';
const route = useRoute()
const breadcrumb: Ref<RouteLocationMatched[]> = ref([])
// 获取 router里面的title数据
const GetBreadcrumb = () => {
  // 过滤路由信息
  let matched = route.matched.filter((item) => item.meta && item.meta.title && item.children.length !== 1)
  const frist = matched[0]
  // 判断当点击首页时，就给一个显示首页
  if (frist.path == '/index') {
    matched = []
  }
  breadcrumb.value = matched
}
GetBreadcrumb()
// 通过监听路由的变化
watch(() => route.path, () => {
  GetBreadcrumb()
})

</script>
<template>
  <div class='breadcrumb'>
    <el-breadcrumb>
      <el-breadcrumb-item>{{ $t('menus.wIndex') }}</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{
        $t(item.meta.title)
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<style lang='less' scoped>
.breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;

  .breadcrumb-item {
    float: left;
  }

  .userinfo {
    float: right;
  }
}
</style>